<template>
  <div class="main-left">
    <div class="tree-list">
      <el-tree
      ref="tree"
      :highlight-current="true"
      :data="list"
      node-key="id"
      :default-expanded-keys="[]"
      :props="treeProps"
      icon-class="el-icon-arrow-right"
    >
      <span @click="viewNode(data)" slot-scope="{ node, data}" class="tree-node">
        <div :class="{'file-label': true,'ellipsis': true}">
          {{ node.label }}
        </div>
      </span>
    </el-tree>
    </div>
  </div>
</template>

<script>
export default {
  name: 'index',
  props: {
    // 节点列表
    list: {
      type: Array,
      default: () => {
        return []
      }
    },
    // 节点 props
    treeProps: {
      type: Object,
      default: () => {
        return {
          children: 'childrens',
          label: 'chapterName'
        }
      }
    }
  },
  data () {
    return {
    }
  },
  methods: {
    viewNode (data) {
      if (!data.hasChildren) {
        this.$emit('viewNode', data)
      }
    }
  }
}
</script>
<style scoped lang="scss">
  .main-left {
    width: 100%;
    height: 100%;
    overflow: hidden;
    float: left;
    border: 1px solid rgba(229, 229, 229, 1);
    border-radius: 5px;
    background: rgba(255, 255, 255, 1);
    display: flex;
    flex-direction: column;
  }
  .tree-list {
    overflow: auto;
    .tree-node {
      width: 90%;
      .file-label {
        display: inline-block;
        height: 44px;
        line-height: 44px;
        &.ellipsis {
          overflow: hidden;
          text-overflow: ellipsis;
          white-space: nowrap;
        }
      }
      .tree-btns {
        padding-bottom: 10px;
        width: 100%;
        text-align: right;
      }
    }
    ::v-deep .el-tree-node__content {
      height: fit-content;
      border-bottom:1px solid rgba(229,229,229,1);
    }
  }
</style>
